<template>

    <div v-if="!load" style="padding-bottom: 10px;">
        <div class="xq1" v-for="(item,index) in recordp" :key="index">
            <van-collapse v-model="activeNames">
                <van-collapse-item :name="index">
                    <template #title>
                        <!--  <van-badge color="#FFC000" :content="$t('m.invest')+' '+(invest??0) +' BNB'">-->
                        <div>{{ formatAddr(item.address) }}</div>
                        <!-- </van-badge>-->

                    </template>
                    <template #value>
                        <div>
                                    <span style="
                                    background: #FFC000;color:white;font-size:10px;padding:2px 3px;border-radius: 2px;">
                                    {{item.invest +' BNB'}}
                                    </span>
                            &nbsp;{{item.team_invest}}
                        </div>
                    </template>


                    <record-list :addressr="item.address"></record-list>

                </van-collapse-item>

            </van-collapse>

        </div>
    </div>

    <div style="display:flex;justify-content: center;padding:15px; font-size: 12px;" class="xq1" v-else>
        <div v-if="load2"><van-loading /></div>
        <div v-else>{{$t('m.nouser')}}</div>

    </div>

</template>

<script>
import { getInviteRecord } from '@/util/api';
import detectEthereumProvider from '@metamask/detect-provider'
import Web3 from 'web3'
import RecordList from "../components/RecordList";
import rouseAbi from '@/abi_rouse'
// import wuAbi from '@/abi_wu'

export default {
    name: 'RecordList',
    components:{
        RecordList,

    },
    props: {
        addressr: String,
    },

    data() {
        return {

            activeNames:['1'],
            address:"---",
            profit:0,
            amount:0,
            record:[],
            recordp:[],
            load:true,
            load2:true,
        };
    },
    computed:{
        formatAddr() {
            return addr => {
                let str1 = addr.substring(0, 5)
                let str2 = addr.substring(37)
                return str1 + "*****" + str2
            }
        }
    },
    created() {
        this.getRecord()
        //   this.getInvite()
    },
    mounted() {


    },
    methods: {

        /*   async getInvite() {
               try{
                   const provider = detectEthereumProvider();

                   let web3;
                   if (provider) {
                       console.log('Ethereum successfully detected!')
                       web3=new Web3(window.ethereum) ;
                   } else {
                       // if the provider is not detected, detectEthereumProvider resolves to null
                       console.error('Please install MetaMask!')
                   }


                  var contractId = this.$store.state.rouse_contract;
                  var tokenContract = new web3.eth.Contract(rouseAbi, contractId);


                  let invest = await tokenContract.methods.userInvestBNBAmount(this.addressr).call();
                  this.invest = web3.utils.fromWei(invest, 'ether')

               }catch(e){
                   console.log(e.message)
                   return 0;
               }

           },*/

        async getRecord(){

            //   let web3 = new Web3(window.web3.currentProvider)
            const provider = detectEthereumProvider();

            let web3;
            if (provider) {
                console.log('Ethereum successfully detected!')
                web3=new Web3(window.ethereum) ;
            } else {
                // if the provider is not detected, detectEthereumProvider resolves to null
                console.error('Please install MetaMask!')
            }


            let data = {
                address: web3.utils.toChecksumAddress(this.addressr)
                //  address: web3.utils.toChecksumAddress(this.$store.state.address)
            }

            let res = await getInviteRecord(data);
            this.record=res.data.data


            if(this.record.length > 0){
                this.load = false;

                var contractId = this.$store.state.rouse_contract;
                var tokenContract = new web3.eth.Contract(rouseAbi, contractId);

                for(let i=0; i<this.record.length; i++) {
                    let invest =await tokenContract.methods.userInvestBNBAmount(this.record[i].address).call();
                    let investp = web3.utils.fromWei(invest, 'ether')

                    this.recordp.push({invest:investp, ...this.record[i]});
                }


            }
            if(this.record.length == 0){
                this.load2 = false;
            }
            //this.invite_num=this.record.length

        },

    }

}
</script>

<style>
.van-cell {
    position: relative;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    box-sizing: border-box;
    width: 100%;
    padding: 8px  16px;
    overflow: hidden;
    color: #fff;
    font-size: 14px;
    line-height: 24px;
    background-color: #201f1f;
}

.van-collapse-item__content {
    padding: 8px 0px;
    color: #969799;
    font-size: 14px;
    line-height: 1.5;
    background-color: #201f1f;
}
van-cell--clickable:active {
    background-color: #201f1f !important;
}
</style>
<style scoped>


.xq1{
    padding: 5px 0px;
    background-color: #201f1f;
    border-radius: 5px;
    margin-bottom: 1px;
    margin:3px;

}

</style>